<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>誉禾植物店</title>
  <!-- bootstrap样式 -->
  <link href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <!-- element-ui的样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="../css/common.css">

  <!-- vue2框架的js和emenet-ui的js -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- 可以发送jquery请求 -->
  <script src="../js/jquery.min.js"></script>
  <!-- bootstrap框架 -->
  <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
  <!-- js动画 -->
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
  <!-- 用于发送请求 -->
  <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<style>
  .home_div {
    width: 23%;
    height: 150px;
    margin: auto;
    border-radius: 20px;
    box-shadow: 1px 1px 15px rgba(0, 0, 0, .2);
    padding-top: 2%;
  }
</style>

<body>
  <div id="home">
    <div style="padding-top: 1%;padding-left: 2%; background-color: #97df4f;display: flex;">
      <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
        <el-radio-button :label="false">展开</el-radio-button>
        <el-radio-button :label="true">收起</el-radio-button>
      </el-radio-group>
      <div style="margin-top: 0.25%;margin-left: 7%;">
        <h4 style="font-weight: 600;">誉禾植物店后台管理</h4>
      </div>
    </div>
    <div style="display: flex;margin-top: 0.5%;">
      <div style="width: 15%;">
        <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
          :collapse="isCollapse">
          <el-menu-item index="1">
            <span slot="title"><a href="./home.html">主页</a></span>
          </el-menu-item>
          <el-menu-item index="2">
            <span slot="title"><a href="./goods.html">植物管理</a></span>
          </el-menu-item>
          <el-menu-item index="3">
            <span slot="title"><a href="./addGoods.html">新增植物</a></span>
          </el-menu-item>
          <el-menu-item index="4">
            <span slot="title"><a href="./information.html">新闻管理</a></span>
          </el-menu-item>
          <el-menu-item index="5">
            <span slot="title"><a href="./addInformation.html">新增新闻</a></span>
          </el-menu-item>
          <el-menu-item index="6">
            <span slot="title"><a href="./order.html">订单管理</a></span>
          </el-menu-item>
          <el-menu-item index="7">
            <span slot="title"><a href="./user.html">用户管理</a></span>
          </el-menu-item>
          <el-menu-item index="8">
            <span slot="title"><a href="./userinfo.html">个人信息</a></span>
          </el-menu-item>
          <el-menu-item index="9">
            <span slot="title"><a href="./login.html">退出登录</a></span>
          </el-menu-item>
        </el-menu>
      </div>
      <div style="width: 85%;padding-top: 2%;">
        <div style="width: 85%;margin: auto;padding-top: 3%;">
          <div style="display: flex;">
            <div class="home_div">
              <h4 style="text-align: center;font-weight: 600;color: #97df4f;">总订单数</h4>
              <h2 style="text-align: center;font-weight: 600;margin-top: 2%;">{{ ruleForm.orders_count }}</h2>
            </div>
            <div class="home_div">
              <h4 style="text-align: center;font-weight: 600;color: #000;">总商品数</h4>
              <h2 style="text-align: center;font-weight: 600;margin-top: 2%;">{{ ruleForm.goods_count }}</h2>
            </div>
            <div class="home_div">
              <h4 style="text-align: center;font-weight: 600;color: #6885eb;">总新闻数</h4>
              <h2 style="text-align: center;font-weight: 600;margin-top: 2%;">{{ ruleForm.news_count }}</h2>
            </div>
            <div class="home_div">
              <h4 style="text-align: center;font-weight: 600;color: #d2f139;">总用户数</h4>
              <h2 style="text-align: center;font-weight: 600;margin-top: 2%;">{{ ruleForm.user_count }}</h2>
            </div>
          </div>
          <div style="display: flex;margin-top: 3%;">
            <div style="width: 48%;margin-right: auto;">
              <!-- 最热新闻 -->
              <el-table :data="tableData1" style="width: 100%" max-height="550"
                :header-cell-style="{background: '#97df4f',color: '#000'}">
                <el-table-column prop="id" label="id">
                </el-table-column>
                <el-table-column prop="title" label="新闻标题">
                </el-table-column>
                <el-table-column prop="ntoes" label="说明">
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间">
                </el-table-column>
              </el-table>
            </div>
            <div style="width: 48%;margin-left: auto;">
              <!-- 最热商品 -->
              <el-table :data="tableData" style="width: 100%" max-height="550"
                :header-cell-style="{background: '#97df4f',color: '#000'}">
                <el-table-column prop="id" label="id" width="180">
                </el-table-column>
                <el-table-column prop="name" label="植物名称" width="120">
                </el-table-column>
                <el-table-column label="植物图片" width="80">
                  <template slot-scope="scope">
                    <img v-if="scope.row.img" width="100%" height="60px" :src="url+'/download/'+scope.row.img">
                  </template>
                </el-table-column>
                <el-table-column prop="price" label="价格" width="120">
                </el-table-column>
                <el-table-column prop="material" label="材料" width="300">
                </el-table-column>
                <el-table-column prop="packing" label="包装" width="120">
                </el-table-column>
                <el-table-column prop="language" label="花语" width="120">
                </el-table-column>
                <el-table-column prop="distribution" label="配送范围" width="120">
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="120">
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
<script>
  new Vue({
    el: '#home',
    data() {
      return {
        isCollapse: false,
        tableData: [],
        tableData1: [],
        ruleForm: {},
        url: 'http://localhost:9081/common',
      };
    },
    created() {
      // 判断是否有登录
      if (localStorage.getItem("managentId") == null) {
        window.location.href = './login.html';
        return;
      } else {
        this.page_init();
      }
    },
    methods: {
      // 初始化
      async page_init(){
        const { data: result } = await this.$http.get("http://localhost:9081/plants_home");
        if (result.flag) {
          this.ruleForm = result.l;
        }
        console.log(this.ruleForm);
        const { data: result1 } = await this.$http.get("http://localhost:9081/plants_goods/home");
        if (result1.flag) {
          this.tableData = result1.list;
        }
        const { data: result2 } = await this.$http.get("http://localhost:9081/plants_news/home");
        if (result2.flag) {
          this.tableData1 = result2.list;
        }
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  })
</script>

</html>